<template>
  <div>
    <p>欢迎来到_Vue开发的收银系统_水果店</p>
    <div>
      <h4>苹果10元 / 斤, 折扣 <8折></h4>
      <span>请输入你要购买的斤数</span>
      <input type="text" v-model.number="num" />
      <br />
      <button @click="btn">结账买单-</button>
      <p>
        结账单: 总结 <i>{{ zong }}</i
        >元 折扣价: <i>{{ zk }}</i> 元 省了: <i>{{ sl }}</i
        >元
      </p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num: "",
      zong: "",
      zk: "",
      sl: "",
    };
  },
  methods: {
    btn() {
      let a = this.num;
      let b = a * 10;
      let c = a * 8;
      let d = a * 2;
      this.zong = b;
      this.zk = c;
      this.sl = d;
    },
  },
};
</script>

<style>
</style>